<template>
    <div class="page-container index-container">
        <div class="m-mainBox">
            <div class="u-tabs-button">

                <div class="mainTab clearfix">
                    <div class="activeBg" ref="activeBg"></div>
                    <div class="tab" :class="{'activ':index==active}" v-for="(item,index) in tabList" @click="changeTab(index)">{{item}}</div>
                </div>

            </div>
        </div>
        <div class="m-GenBox evaluate-main">
            <div class="u-cardBox evaluate-box" v-for="(item,index) in reportList" :class="{'forbid':item.isSubmit}">
                <div class="evaluate-tit">{{item.title}}</div>
                <div class="evaluate-time">{{item.time}}</div>
                <div class="evaluate-btn" @click="openReport(item,index)">{{item.isSubmit?'已完成':'问卷调研'}}</div>
            </div>
        </div>



        <el-dialog :close-on-click-modal='false' :visible.sync="reportVisible" width="840px" top='0'  :show-close='false' class="reportDialog">
            <div class="dialogClose" @click="reportVisible=false"><em></em></div>
            <div class="reportMain cusMiniScroll">
                <h2>问卷调研</h2>
                <h3> 一.品德发展水平</h3>
                <h4>1.行为习惯</h4>
                1.当我最后一个离开教室时，我会主动关好门窗、关闭日光灯5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t1" label="1">总是</el-radio>
                    <el-radio v-model="form.t1" label="2">经常</el-radio>
                    <el-radio v-model="form.t1" label="3">有时</el-radio>
                    <el-radio v-model="form.t1" label="4">很少</el-radio>
                    <el-radio v-model="form.t1" label="5">从不</el-radio>
                </div>
                2.我会主动把垃圾扔入垃圾箱中5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t2" label="1">总是</el-radio>
                    <el-radio v-model="form.t2" label="2">经常</el-radio>
                    <el-radio v-model="form.t2" label="3">有时</el-radio>
                    <el-radio v-model="form.t2" label="4">很少</el-radio>
                    <el-radio v-model="form.t2" label="5">从不</el-radio>
                </div>
                3．我（）迟到或早退1-5<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t3" label="1">总是</el-radio>
                    <el-radio v-model="form.t3" label="2">经常</el-radio>
                    <el-radio v-model="form.t3" label="3">有时</el-radio>
                    <el-radio v-model="form.t3" label="4">很少</el-radio>
                    <el-radio v-model="form.t3" label="5">从不</el-radio>
                </div>
                4.吃饭时，我（）剩饭剩菜1-5<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t4" label="1">总是</el-radio>
                    <el-radio v-model="form.t4" label="2">经常</el-radio>
                    <el-radio v-model="form.t4" label="3">有时</el-radio>
                    <el-radio v-model="form.t4" label="4">很少</el-radio>
                    <el-radio v-model="form.t4" label="5">从不</el-radio>
                </div>
                5.上下楼梯时，我（）和同学嬉戏打闹、推推搡搡1-5<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t5" label="1">总是</el-radio>
                    <el-radio v-model="form.t5" label="2">经常</el-radio>
                    <el-radio v-model="form.t5" label="3">有时</el-radio>
                    <el-radio v-model="form.t5" label="4">很少</el-radio>
                    <el-radio v-model="form.t5" label="5">从不</el-radio>
                </div>
                6.见到未关紧的水龙头，我（）会将它关紧5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t6" label="1">总是</el-radio>
                    <el-radio v-model="form.t6" label="2">经常</el-radio>
                    <el-radio v-model="form.t6" label="3">有时</el-radio>
                    <el-radio v-model="form.t6" label="4">很少</el-radio>
                    <el-radio v-model="form.t6" label="5">从不</el-radio>
                </div>
                7.每次放学时，我（）会将桌椅摆放整齐5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t7" label="1">总是</el-radio>
                    <el-radio v-model="form.t7" label="2">经常</el-radio>
                    <el-radio v-model="form.t7" label="3">有时</el-radio>
                    <el-radio v-model="form.t7" label="4">很少</el-radio>
                    <el-radio v-model="form.t7" label="5">从不</el-radio>
                </div>
                8.过马路时，我（）会细心观察确认安全后再过马路5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t8" label="1">总是</el-radio>
                    <el-radio v-model="form.t8" label="2">经常</el-radio>
                    <el-radio v-model="form.t8" label="3">有时</el-radio>
                    <el-radio v-model="form.t8" label="4">很少</el-radio>
                    <el-radio v-model="form.t8" label="5">从不</el-radio>
                </div>
                <h4>2.公民素养</h4>
                9.在和别人争吵时，虽然明知不对，我还是会忍不住说一些过头话，甚至骂他几句1-5<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t9" label="1">完全符合</el-radio>
                    <el-radio v-model="form.t9" label="2">比较符合</el-radio>
                    <el-radio v-model="form.t9" label="3">不确定</el-radio>
                    <el-radio v-model="form.t9" label="4">比较不符合</el-radio>
                    <el-radio v-model="form.t9" label="5">完全不符合</el-radio>
                </div>
                10.在公共场合遇见师长、邻居、长辈或者其他认识的人时，我（）会热情而主动地向他打
                招呼问好5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t10" label="1">总是</el-radio>
                    <el-radio v-model="form.t10" label="2">经常</el-radio>
                    <el-radio v-model="form.t10" label="3">有时</el-radio>
                    <el-radio v-model="form.t10" label="4">很少</el-radio>
                    <el-radio v-model="form.t10" label="5">从不</el-radio>
                </div>
                11.学校开大会或大型活动，我（）会严格按照老师的要求入场和退场5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t11" label="1">总是</el-radio>
                    <el-radio v-model="form.t11" label="2">经常</el-radio>
                    <el-radio v-model="form.t11" label="3">有时</el-radio>
                    <el-radio v-model="form.t11" label="4">很少</el-radio>
                    <el-radio v-model="form.t11" label="5">从不</el-radio>
                </div>
                12．看到老人过马路时，我（）会扶着老人一起过5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t12" label="1">总是</el-radio>
                    <el-radio v-model="form.t12" label="2">经常</el-radio>
                    <el-radio v-model="form.t12" label="3">有时</el-radio>
                    <el-radio v-model="form.t12" label="4">很少</el-radio>
                    <el-radio v-model="form.t12" label="5">从不</el-radio>
                </div>
                13．看到受伤的小动物，我会有一种特别想保护它的想法5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t13" label="1">完全符合</el-radio>
                    <el-radio v-model="form.t13" label="2">比较符合</el-radio>
                    <el-radio v-model="form.t13" label="3">不确定</el-radio>
                    <el-radio v-model="form.t13" label="4">比较不符合</el-radio>
                    <el-radio v-model="form.t13" label="5">完全不符合</el-radio>
                </div>
                14．打饭菜的时候，只要有机会我就会跑到前面去1-5<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t14" label="1">完全符合</el-radio>
                    <el-radio v-model="form.t14" label="2">比较符合</el-radio>
                    <el-radio v-model="form.t14" label="3">不确定</el-radio>
                    <el-radio v-model="form.t14" label="4">比较不符合</el-radio>
                    <el-radio v-model="form.t14" label="5">完全不符合</el-radio>
                </div>
                15.很多游客在一座禁止攀爬的假山上拍照，我也会上去拍照1-5<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t15" label="1">完全符合</el-radio>
                    <el-radio v-model="form.t15" label="2">比较符合</el-radio>
                    <el-radio v-model="form.t15" label="3">不确定</el-radio>
                    <el-radio v-model="form.t15" label="4">比较不符合</el-radio>
                    <el-radio v-model="form.t15" label="5">完全不符合</el-radio>
                </div>
                16.乘坐公交时，我（）会给有需要的人让座5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t16" label="1">总是</el-radio>
                    <el-radio v-model="form.t16" label="2">经常</el-radio>
                    <el-radio v-model="form.t16" label="3">有时</el-radio>
                    <el-radio v-model="form.t16" label="4">很少</el-radio>
                    <el-radio v-model="form.t16" label="5">从不</el-radio>
                </div>
                17.在风景区看到有人留下“到此一游”的标记，我会觉得这是一种不道德的行为5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t17" label="1">完全符合</el-radio>
                    <el-radio v-model="form.t17" label="2">比较符合</el-radio>
                    <el-radio v-model="form.t17" label="3">不确定</el-radio>
                    <el-radio v-model="form.t17" label="4">比较不符合</el-radio>
                    <el-radio v-model="form.t17" label="5">完全不符合</el-radio>
                </div>
                18．每当别人帮助我，过后我（）会说谢谢5-1<br>
                <div class="selectCondition">
                    <el-radio v-model="form.t18" label="1">总是</el-radio>
                    <el-radio v-model="form.t18" label="2">经常</el-radio>
                    <el-radio v-model="form.t18" label="3">有时</el-radio>
                    <el-radio v-model="form.t18" label="4">很少</el-radio>
                    <el-radio v-model="form.t18" label="5">从不</el-radio>
                </div>
                19.我从来不说脏话或别人的坏话5-1
                <div class="selectCondition">
                    <el-radio v-model="form.t19" label="1">完全符合</el-radio>
                    <el-radio v-model="form.t19" label="2">比较符合</el-radio>
                    <el-radio v-model="form.t19" label="3">不确定</el-radio>
                    <el-radio v-model="form.t19" label="4">比较不符合</el-radio>
                    <el-radio v-model="form.t19" label="5">完全不符合</el-radio>
                </div>
                20.我从不践踏草坪5-1
                <div class="selectCondition">
                    <el-radio v-model="form.t20" label="1">完全符合</el-radio>
                    <el-radio v-model="form.t20" label="2">比较符合</el-radio>
                    <el-radio v-model="form.t20" label="3">不确定</el-radio>
                    <el-radio v-model="form.t20" label="4">比较不符合</el-radio>
                    <el-radio v-model="form.t20" label="5">完全不符合</el-radio>
                </div>
            </div>
            <div class="submitBox">
                <div class="saveReport" @click="saveReport">保存至草稿箱</div>
                <div class="submitReport" @click="submitReport">立即提交</div>
                
            </div>
        </el-dialog>


    </div>
</template>

<script>
export default {
    data(){
        return{
            tabList:['材料填报','草稿箱'],
            active:0,
            reportVisible:false,
            form:{},
            reportList:[{
                title:'教育局关于中小学发展状况调研报告',
                time:'2020.11.16',
            },{
                title:'领导风格问卷',
                time:'2020.11.14',
            },{
                title:'课题论文',
                time:'2020.11.12',
            },{
                title:'获奖证书',
                time:'2020.11.08',
            },{
                title:'教研能力评价问卷',
                time:'2020.11.02',
                isSubmit:true
            },{
                title:'创造型教学问卷',
                time:'2020.11.01',
                isSubmit:true
            },{
                title:'学校环境问卷',
                time:'2020.10.28',
                isSubmit:true
            },{
                title:'教学教案',
                time:'2020.10.25',
                isSubmit:true
            },{
                title:'教师行为问卷',
                time:'2020.10.21',
                isSubmit:true
            }],
            curIndex:0,
        }
    },
    mounted(){

    },
    methods:{
        openReport(item,index){
            this.reportVisible = true;
            this.curIndex = index;
            // this.$set(item,"isSubmit",true)
        },
        submitReport(){
            this.$set(this.reportList[this.curIndex],"isSubmit",true);
            this.reportVisible = false;
        },
        saveReport(){
            this.reportVisible = false;
        },
        changeTab(index){
            this.active = index;
            this.$refs['activeBg'].style.left = (index*150) + "px";
        }
    }
}
</script>

<style lang='scss' scoped>
.evaluate-main{
    padding: 0 40px;
}
.u-cardBox{
    padding: 30px !important;
    box-shadow: 0 0 10px rgba($color: #3b64a8, $alpha: .1);
}
.evaluate-box{
    width: 23%;
    height: 260px;
    overflow: hidden;
    margin-right: 2%;
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
    &:hover{
        transform: translateY(-2px);
        box-shadow: 0 10px 50px rgba($color: #3b64a8, $alpha: .2);
    }
    .evaluate-tit{
        font-size: 24px;
        font-weight: bold;
        color: #333;
        padding-bottom: 10px;
        line-height: 1.5em;
    }
    .evaluate-time{
        font-size: 18px;
        color: #999;
    }
    .evaluate-btn{
        position: absolute;
        bottom: 30px;
        left: 50%;
        margin-left: -70px;
        width: 140px;
        height: 44px;
        border-radius: 22px;
        background: #3964f9;
        font-size: 16px;
        color: #FFF;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
        transition: .2s all;
        &:hover{
            background:#4b72f9
        }
    }
    &.forbid{
        .evaluate-tit{
            color: #666;
        }
        .evaluate-btn{
            background: #cdd5dd;
        }
    }
}
.reportMain{
    width: 100%;
    min-height: 500px;
    overflow: auto;
    line-height: 2em;
    padding: 0 80px;
    font-size: 16px;
    color:#333;
    flex: 1;
    h2{
        padding-bottom: 20px;
    }
    h4{
        padding: 10px 0;
    }
    .selectCondition{
        padding-bottom: 20px;
    }
}
/deep/{
    .el-dialog__body{
        padding: 20px 10px;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .reportDialog{
        .el-dialog{
            height: 100%;
        }
        .el-dialog__header{
            display: none;
        }
    }
}

@media screen and (max-width:1400px ) {
    .evaluate-box{
        width: 31%;
    }
}
.submitBox{
    padding-top: 25px;
    width: 100%;
    text-align: center;
    border-top: 1px dotted #d3d5dc;
    .saveReport,.submitReport{
        width: 220px;
        height: 56px;
        line-height: 56px;
        border-radius: 28px;
        font-size: 18px;
        display: inline-block;
        cursor: pointer;
        margin: 0 10px;
    }
    .saveReport{
        background: #e1e8fe;
        color: #3964f9;
        &:hover{
            background: #dfe5f8;
        }
    }
    .submitReport{
        background: #3964f9;
        color: #FFF;
        &:hover{
            background:#4b72f9
        }
    }

    
    
}
</style>